import Image from 'next/image'

export default function Team() {
  const avatarList = [
    {id: 1, avatar: '/images/avatar_1.png', name: '0xShifu', position: 'Co-founder, Chief Investment Officer', intro: 'With five years of experience in the blockchain industry, OxShifu has developed a plethora of DeFi products. In 2020, he established and managed a crypto fund, actively investing in and incubating web3 projects that span across infrastructure, DeFi, GameFi, and NFT. OxShifu has a deep understanding of web3 project development and token economics, helping over 20 projects get listed on major exchanges such as Binance, Coinbase and Okx.'},
    {id: 2, avatar: '/images/avatar_2.png', name: 'Terry Cao', position: 'Co-Founder, Chief Operating Officer', intro: 'Terry brings over 13 years of leadership experience as a serial entrepreneur. Before joining Redici, he created product strategies for DeFi projects and operated a crypto fund. In addition, he established and managed four companies in the areas of E-commerce, lifestyle brands, and mobile app creation during the web2 era. Terry holds a BA from the University of British Columbia and is pursuing a MPA at Columbia University.'},
    {id: 3, avatar: '/images/avatar_3.png', name: 'Benno Yang', position: 'Co-Founder, Global Head of Asset Management', intro: 'Benno Yang (Co-Founder, Global Head of Asset Management): Prior to Redici, Benno co-founded Hua Jun Qian Jin (Shenzhen) Management Consultant, a top-tier bouquet consultant firm in China. He oversaw over 30 equity investments with a total transaction volume of approximately $160 million. Before that, Benno had worked in transactional law and holds a BA in Law from Shenzhen University, as well as an MA in Law from China University of Political Science and Law.'},
    {id: 4, avatar: '/images/avatar_4.png', name: 'Ivan Liu', position: 'Head of Liquid Strategies', intro: 'Before arriving at Redici, Ivan was the co-founder of 99 Capital, a private equity firm. Prior to that, Ivan had five years of experience working as an investment banking analyst for Huaxing Capital and Citi Orient. He holds a BA in Engineering from Sun Yat-sen University, as well as an MA in Science from the Chinese University of Hong Kong. Ivan has extensive knowledge and experience in the financial sector.'},
  ]
  return (
    <div className="w-full h-full bg-blend-overlay relative team-page md:overflow-scroll
      p-0
      pb-24 pt-[100px]
      md:p-[6vh] md:pb-[20vh]"
    >
      <div className='absolute left-0 bottom-0 h-[218px] w-full z-30 md:hidden pointer-events-none'
        style={{
          background: 'linear-gradient(180deg, rgba(214, 201, 193, 0) 0%, #D6C9C1 46.67%, #D6C9C1 100%)'
        }}>
      </div>
      <div className='h-full md:h-auto flex flex-col relative items-start z-20 overflow-scroll p-5 pb-20 md:p-0 md:overflow-visible'>
        <div className="flex items-center">
          <div className="font-pp-fragment text-3xl md:text-[88px] md:leading-normal mr-10">Team</div>
          <div className="text-2xl max-w-[800px] hidden md:block font-light	">
            We are now entering web3, which is the newest type of internet iteration that combines the decentralized and community-governed philosophy.
          </div>
        </div>
        <div className=' flex flex-wrap mt-14 md:mt-[100px]'>
          {
            avatarList.map(item => {
              return (
                <div className="w-full flex mb-10 md:w-1/2 md:pr-[120px] md:mb-16" key={item.id}>
                  <Image className='w-[84px] h-[100px] mr-5 md:w-[168px] md:h-[200px] md:mr-8' width={168} height={200} src={item.avatar} alt="" />
                  <div className='md:max-w-[340px]'>
                    <div className='font-pp-fragment text-[18px] mb-2 md:text-[2rem]'>{item.name}</div>
                    <div className='text-[10px] font-medium mb-2 md:mb-3 text-[#9B5020] md:text-xs'>{item.position}</div>
                    <div className='text-[10px] border-t border-[#B77247] pt-2 text-[#B77247] md:text-xs'>{item.intro}</div>
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
